{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 人员管理->行业管理 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <h3 class="box-title m-b-20">行业管理</h3>
          <!-- <p class="text-muted m-b-30">Data table example</p> -->
          <div class="row m-b-20">
            <div class="di fl p-l-15 m-r-30">
              <button class="btn btn-block btn-outline btn-info p-l-12 p-r-12" @click="editItem()">添加行业</button>
            </div>
          </div>
          <div class="table-responsive">
            <table id="myTable" class="table table-striped color-table info-table">
              <thead>
                <tr>
                  <th>行业名称</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody v-if="dataList.length>0">
                <tr v-for="(item,index) in dataList">
                  <td>{{item.name}}</td>
                  <td>
                    <span class="edit info" @click="editItem(item.id)">编辑</span>
                    <span class="edit danger m-l-10" data-toggle="modal" data-target="#confirm1" @click="delId=item.id">删除</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
            <!-- 确认取消提示框 -->
            <confirm  class="modal fade" id="confirm1" tabindex="-1" role="dialog" :confirm-msg="confirmMsg" :edit-id="delId" @yes-btn="deleteItem"></confirm>
          </div>
          <!-- 编辑框 -->
          <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <!-- <span aria-hidden="true">&times;</span> -->
                    关闭
                  </button>
                  <!-- <h4 class="modal-title">New message</h4> -->
                </div>
                <div class="modal-body">
                  <div class="form-group">
                    <label class="control-label w-120 m-l-40">行业名称:</label>
                    <input type="text" class="form-control di" placeholder="填写" v-model="cur_item.name">
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-info" @click="doSubmit">确认</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}
{include file="component:confirm" /}
<script type="text/javascript">
  var vm1 = new Vue({
    el: '#m_main',
    data() {
      return {
        searchUrl: "/dboard/industry/ajaxList", //搜索接口
        draw: '', //校验字段
        dataList: [], //搜索列表数据
        trAll: 0, //数据总数
        pageAll: 0, //页码总数
        pageCur: 1, //当前页
        pageSize: 10, //每页数量
        delUrl: '/dboard/industry/delInd',//删除接口
        confirmMsg: '删除当前行业？', //confirm提示框内容
        delId: undefined, //当前删除的零部件编号
        cur_item:{id:'',name:''},//当前操作行
      }
    },
    mounted() {
      this.pageTo(1);
    },
    methods: {
      // 搜索当前页并渲染列表
      pageTo(page) {
        var that = this;
        var params = {};
        searchList(that,page,params,(res)=>{
        },(fail)=>{
        },(error)=>{
        })
      },
      // 编辑/新增 当前行
      editItem(id){
        var that = this;
        if(id){
          // 编辑
          for(var i=0 ; i<that.dataList.length ; i++){
            if(that.dataList[i].id == id){
              $.extend(true,that.cur_item,that.dataList[i]);
              break;
            }
          }
        }else{
          // 新增
          that.cur_item = {id:'',name:''};
        }
        $('#editModal').modal('toggle');    //显示编辑框
      },
      //确认提交
      doSubmit(){
        var that = this;
        axios.post('/dboard/industry/doCreateIndustry',that.cur_item,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            //请求成功
            alert(res.data.Msg);
            that.pageTo(that.pageCur);
          }else{
            alert(res.data.Msg);
          }
        $('#editModal').modal('toggle');    //显示编辑框
        }).catch(err=>{})
      },
      // 删除当前行
      deleteItem(){
        var that = this;
        var params = {id:that.delId};
        console.log(params);
        deleteLine(that,params,(res)=>{},(fail)=>{},(err)=>{});
      },
    }
  })
</script>
